<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:masking-path-03-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-masking-path-03-b.html">Full version</a>, <a href="basic-masking-path-03-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/masking.html#ClippingPaths">14.3 Clipping paths</a></p>
 <p>
				<a href="full-masking-path-02-b.html">masking-path-02-b ←</a> 
				<a href="full-index.html">index</a>
				<a href="full-masking-path-04-b.html">→ masking-path-04-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>masking-path-03-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=480 height=360>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/masking-path-03-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=480 height=360 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/masking-path-03-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of masking-path-03-b" src="../png/full-masking-path-03-b.png" width="480" height="360"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
			<p>
				Test 'overflow'/'clip' on outermost and inner 'svg' elements.
			</p>
			<p>
				There are two parts to the test. The first part tests viewport clipping
				on outermost 'svg' elements. The second part tests viewport clipping
				on inner 'svg' elements.
			</p>
			<p>
				The test case also tests the initial value of the 'overflow' property
				to ensure that it is set to 'hidden' for all 'svg' elements.
				Tester should zoom out and/or pan to check this.
			</p>
			<p>
				To test clipping to the outermost 'svg' element,
				a rectangle with a light blue interior, a light red border and a black
				string that says "Clip to outer 'svg'" is painted four times such that
				it will overflow each of the top, left, right and bottom 
				sides of the bounds of the outermost 'svg' element, respectively.
				The UA should clip the rectangle and string to the bounds of the
				outermost 'svg' element (the 480x360 rectangular viewport) and 
				continue to clip to this viewport if the image is zoommed in or out, 
				or panned.
			</p>
			<p>
				To test clipping to inner 'svg' elements, a rectangle with a light red
				interior, a light blue border and a black string that says "Clip to
				inner 'svg'" is painted four times such that it will overflow each of
				the top, left, right and bottom sides of the bounds of an inner 'svg'
				element, respectively.  The UA should clip the rectangle and string to
				the bounds of the inner 'svg' element, which are depicted by a
				rectangle with a thick, dark-green perimeter and no fill.
			</p>
			<p>
				Note that minor text layout differences, as are permissible under CSS2
				rules, can lead to slightly different visual results regarding where
				the text strings get clipped.
			</p>

		</div>
<div class="linkbar"> <p>
				<a href="full-masking-path-02-b.html">masking-path-02-b ←</a>
				<a href="full-index.html">index</a>
				<a href="full-masking-path-04-b.html">→ masking-path-04-b</a>
						</p></div>
</body>
</html>
